<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        #wrap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 0 auto;
        }

        #wrap > div {
            width: 33%;
            height: 33%;
            border: 1px solid red;
            float: left;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }

        #start {
            cursor: pointer;
            /*background-color: deeppink;*/
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="option">Mate40Pro</div>
    <div class="option">IPhone12</div>
    <div class="option">xiaomi</div>
    <div class="option">谢谢参与</div>
    <div id="start">开始抽奖</div>
    <div class="option">谢谢参与</div>
    <div class="option">鼠标</div>
    <div class="option">键盘</div>
    <div class="option">耳麦</div>
</div>

<script>
    let start = document.getElementById("start");
    let gifts = document.getElementsByClassName("option");
    let timer = null;
    start.onclick = function () {
        let count = 0;
        if (timer == null) {
            timer = setInterval(function () {
                count++;
                start.style.backgroundColor = 'deeppink';
                let n = Math.round(Math.random() * 7);
                console.log(n);
                for (var i = 0; i < gifts.length; i++) {
                    gifts[i].style.backgroundColor = 'white';
                }
                gifts[n].style.backgroundColor = "red";
                // count++; //count在这里加1结果就不对
                if (count > 32) {
                    clearInterval(timer);
                    timer = null;
                    console.log("中奖号：" + n)
                    start.style.backgroundColor = 'white';
                    count = 0;
                }
            }, 100);

        }

    }
</script>
</body>
</html>